import React, { PureComponent } from 'react';
import LzEditor from 'react-lz-editor'
import { Card, Form, Input, Select, Button,DatePicker } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import axios from 'axios';
import moment from 'moment';
import { connect } from 'dva';
const FormItem = Form.Item;
const options = [];
const Option = Select.Option;
@connect(({ card, loading }) => ({
  card: card.currentCard,
  cardLoading: loading.effects['card/getCardlist'],
}))
@Form.create()
export default class ReadcardAdd extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
      autoCompleteResult: [],
      content: '',
      htmlContent: ``,
      markdownContent: "## HEAD 2 \n markdown examples \n ``` welcome ```",
      responseList: []
    }
    this.receiveHtml=this.receiveHtml.bind(this);
  }
  receiveHtml(content) {
    console.log("recieved HTML content", content);
    this.setState({ "content":content })
    // this.setState({responseList:[]});
  }
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
      if (!err) {
        const values = {
          ...fieldsValue,
          cancel_card_date: fieldsValue['cancel_card_date'].format('YYYY-MM-DD'),
          card_type: this.state.content,
        };
        this.props.dispatch({
          type: 'card/create',
          payload: values,
        });
      }
    });
  };
  handleConfirmBlur = e => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <PageHeaderLayout
        title="文章添加"
        content="文章添加页常见于数据项基本的全面信息添加场景。"
      >
        <Card>
          <Form onSubmit={this.handleSubmit}>
            <FormItem label="文章题目" {...formItemLayout}>
              {getFieldDecorator('card_deposit', {
                rules: [{ required: true, message: '文章题目' }],
              })(<Input  style={{ width: '100%' }} placeholder="文章题目" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="发布城市">
              {getFieldDecorator('register_source', {
                rules: [{ required: true, message: '发布城市' }],
              })(
                <Select placeholder="发布城市">
                  <Option value="武汉">武汉</Option>
                  <Option value="上海">上海</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="过期时间">
              {getFieldDecorator('cancel_card_date', {
                rules: [
                  {
                    required: true,
                    message: '过期时间',
                  },
                ],
              })(<DatePicker style={{ width: '100%' }} placeholder="过期时间" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="文章内容">
              {getFieldDecorator('card_type', {
                rules: [{ required: true, message: '文章内容' }],
                initialValue:this.state.content,
              })(
                <LzEditor 
                active={true} 
                importContent={this.state.htmlContent} 
                cbReceiver={this.receiveHtml}
                video={false}
                audio={false}
                lang="ch"/>
              )}
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit">
                确定添加
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
